<template>
<view>
  <view class="cards">
        <view class="flex">
            <view>门头照片</view>
        </view>
        
        <view class="photos">
            <image class="addphoto" :src="path" />
        </view>
    </view>
<view  class="flex flex-row">
  <w-select style='flex:9' width="90%" filterable :showClose="false" defaultValue="请选择品牌" :list='brandList' :text="nowBrandName"  @change="setbrand" keyName='id' valueName="name" ></w-select>
  <view class="save flex a-item j-content" @tap="submit">保存</view>
</view>
<view class="imageList">
  <photo class="imageItem" @change="addPhoto"/>
  <photo-image class="imageItem" v-for="(item,index) in nowImageList" :image-url="item.photoUrl" :index="index" @del="delImage"></photo-image>
  <view class="check">
        <view class="check-box" v-for="item in list" :key="item.id" @click="checked(item.id)">
             <view class="checkeds">
                 <span :style="{color:item.id===checkkey?'red':''}" >{{item.name}}</span>
             </view>
        </view>
    </view>
</view>

</view>
</template>

<script>
import {getBasGoodsBrandS} from "../../service/api/shopping";
import WSelect from "@/components/w-select/w-select";
import photo from "../components/photo";
import {curTime, saveImage} from "../../service/auth";
import PhotoImage from "../components/photoImage";
import {addOrSavePhoto1, removePhoto1, getPhotos,doorwayPhotoUrl,usedPhoto} from "../../service/api/delivery";
export default {
  name: "index",
  components:{PhotoImage, WSelect, photo},
  data(){
    return{
      date:{},
        indexGoods:{},
        checkkey:'',
      form:{},
      brandList:[],
      nowBrandId:null,
      nowBrandName:'',
      nowImageList:[],
      path:'',list:[]
    }
  },
  onLoad(option){
    this.customerId = option.customerId
    // 门头照
    doorwayPhotoUrl({customerId:this.customerId}).then(res=>{
        this.path=res.data.doorwayPhotoUrl
    })
  },
  onShow(){
        this.usedPhoto()
  },
  created() {
    getBasGoodsBrandS({size:999}).then(res=>{
    }).catch(err=>{
      this.brandList = err.content
      setTimeout(()=>{
            for(let i of err.content){
                this.indexGoods[i.id] = i.name
            }
            })
    })
  },
  methods:{
    usedPhoto(){
          usedPhoto({customerId:this.customerId}).then(res=>{
              this.list=res.data.map(item=>{
                  return {
                      id:parseInt(item.split(':')[0]),
                      name:item.split(':')[1]
                      }
              })
              console.log(this.list,'jjjj');
          })
      },
    checked(key){
      this.checkkey=key
          this.brandList.map(item=>{
              if (item.id==key) {
                  this.date=item
              }
          })
          this.setbrand(this.date)
          // this.nowImageList=this.form[key].photoList
    },
    delImage(index){
      const obj = this.nowImageList[index]
      if (obj.id)removePhoto1([obj.id])
      this.nowImageList.splice(index,1)
      this.usedPhoto()
    },
    setbrand(e){
      this.nowBrandId = e.id
      this.nowBrandName = e.name
      const brand = this.form[e.id]
      if (!brand){
        getPhotos({goodsBrandIds: e.id,customerId:this.customerId}).then(res=>{
          if (res.status === 200){
            this.form[e.id] = {photoList:res.data.photoList}
            this.form[e.id].isSave = true
            this.nowImageList = this.form[e.id].photoList
          }else {
            uni.showToast({title:err.msg,icon:'none'})
          }
        }).catch(err=>{
          uni.showToast({title:err.msg,icon:'none'})
        })
      }else {
        this.nowImageList =  this.form[e.id].photoList
      }
      },
    submit(){
      uni.showLoading({title:`保存中`})
      if (this.nowBrandId === null)return uni.showToast({title:'请先选择品牌'})
      const keys = Object.keys(this.form)
      this.save(keys)
    },
    save(keys){
      const key = keys.pop()
      console.log('============',key)
      console.log(key)
      if (!key){
        uni.hideLoading()
        uni.showToast({title:'保存成功',icon:'none'})
        return
      }
      if (this.form[key].isSave)return this.save(keys)
      const data ={
        customerId:this.customerId,
        photoList: this.form[key].photoList
      }
      addOrSavePhoto1(data).then(res=>{
        this.form[key].photoList = res.data.photoList
        this.nowImageList = this.form[key].photoList
        this.form[key].isSave = true
        setTimeout(()=>{
          this.save(keys)
          this.usedPhoto()
        },300)
      }).catch(e=>{
        console.log(e)
        uni.hideLoading()
      })
      // const data ={
      //   customerId:this.customerId,
      //   photoList: this.form
      // }
      // addOrSavePhoto1(data).then(res=>{
      //   console.log(res)
      // })
    },
    addPhoto(e){
      const a = saveImage(e)
      a.then(res=>{
        if (this.nowBrandId === null)return uni.showToast({title:'请先选择品牌',icon:'none'})
        this.nowImageList.push({
          goodsBrandId:this.nowBrandId,
          photoUrl: res,
          shootTime:curTime()
        })
        this.form[this.nowBrandId].isSave = false
      })
    

    }
  }
}
</script>

<style scoped>
.save{
  flex:1;
  color: #007aff;
}
.imageList{
  margin: 30rpx;
}
.imageItem{
  float: left;
  margin-right: 20rpx;
}
.cards{
        background-color: white;
        margin: 20rpx 0;
        padding: 20rpx;
		    flex-shrink: 0;
}
.photos{
    display: flex;
    align-items: center;
    }
.addphoto{
    width: 200rpx;
    height: 200rpx;
    margin: 10rpx;

}
    .check{
    display: flex;
    flex-wrap: wrap;
    height: 260rpx;
    overflow: auto;
    width: 100%;
    background-color: white;}
    .check-box{
        margin: 10rpx;}  
</style>
